<template>
	<view class="recommendContainer">
		<swiper class="bannerSwiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item>
				<image class="bannerImg" src="../../static/images/index/1.webp" mode=""></image>
			</swiper-item>
			<swiper-item>
				<image class="bannerImg"  src="../../static/images/index/2.webp" mode=""></image>
			</swiper-item>
			<swiper-item>
				<image class="bannerImg"  src="../../static/images/index/3.webp" mode=""></image>
			</swiper-item>
		</swiper>
		
		<!-- policyDescList区域 -->
		<view class="policyDescList">
			<view class="policyDescItem" v-for="pol in homeData.policyDescList" :key="pol.icon">
				<image :src="pol.icon" mode=""></image>
				<text>{{pol.desc}}</text>
			</view>
		</view>
		
		<!-- nav区域 -->
		<view class="nav">
			<view class="navItem" v-for="kin in homeData.kingKongModule.kingKongList" :key="kin.L1Id">
				<image :src="kin.picUrl" mode=""></image>
				<view>{{kin.text}}</view>
			</view>
		</view>
		
		<!-- CategoryList导航指南区域 -->
		<CategoryList :categoryObj="categoryObj" v-for="categoryObj in homeData.categoryModule" :key="categoryObj.titleSchemeUrl"/>
	</view>
</template>

<script>
	import CategoryList from '../CategoryList/index.vue';
	export default{
		name:"Recommend",
		components:{
			CategoryList
		},
		props:['homeData']
	}
</script>

<style lang="stylus">
	.recommendContainer
		.bannerSwiper
			.bannerImg
				width 100%
				height 100%
		.policyDescList
			display flex
			justify-content space-around
			.policyDescItem
				image
					width 32upx
					height 32upx
					vertical-align middle
				text
					font-size 24upx
					vertical-align middle
		.nav
			display flex
			flex-wrap wrap
			.navItem
				width 20%
				height 150upx
				text-align center
				image
					width 110upx
					height 110upx
				view
					font-size 24upx
</style>
